<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>
	<style>
		body {
			margin: 0px;
		}
		html {
			font-size: 12px;
		}
		.container {
			margin: auto;
			width: 100%;
			padding: 0px;
			background: #f4e6dd;
		}
		.top {
			padding: 20px;
			font-size: 1rem;
			color: #8e4f44;
		}
		.top>div:nth-child(1),.bottom{
			text-align: center;
			font-size: 1.5rem;
			padding: 20px;
			color: #975340;
		}
		.center{
			position: relative;
		}
		.center img{
			width: 100%;
			height: 600px;
		}
		.create-img{
			position: relative;
			width: 100%;
			height: 600px;
			z-index: 10;
		}
		.create-img .title{
			position: absolute;
			width: 100%;
			bottom: 170px;
		}
		.create-img .title-2{
			position: absolute;
			width: 100%;
			top: 140px;
		}
		.erweima,.touxiang{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
		.ma{
			width: 30%;
			height: 120px;
		}
		.ma img{
			width: 100%;
			height: 120px;
		}
		.tou{
			width: 16%;
			height: 57px;
			background: red;
		}
		.min{
			position: absolute;
			bottom: 40px;
			background: #f4e6dd;
			width: 100%;
			height: 30px;
		}
		#create{
			position: absolute;
			z-index: 999;
			top: 0px;
			width: 100%;
			height: 600px;
		}
		.tishi{
			position: absolute;
			z-index: 500;
			top: 0px;
			width: 100%;
			height: 600px;
			font-size: 18px;
			background: #f4e6dd;
			text-align: center;
			line-height: 600px;
		}
		@media (min-width: 768px) {
			.container {
				width: 750px;
			}
		}
	</style>
	<body>
		<div class="container">
			<div class="top">
				<div>#分享有礼，送您阅读币#</div>
				<div>长按下图保存到手机，然后分享至朋友圈，或发送给好友，好友通过二维码关注公众号，您即可即可获得100~1000阅读币奖励！</div>
			</div>
			<div class="center">
				<div id="create">
					<!--<div id="create_2"></div>-->
				</div>
				<div class="tishi">图片生成中...</div>
				<div class="create-img">
					<div class="min"></div>
					
					<img src="img/mmexport.jpg">
					<div class="title">
						<div class="erweima">
							<p class="ma">
								<img src="">
							</p>
						</div>
					</div>
				</div>
				<div class="bottom">#分享有礼，送您阅读币#</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	<script type="text/javascript" src="js/html2canvas.min.js" ></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
//    	$.ajax({
//			type: "get",
//			url: host + "/wechat/qrcode",
//			datatype: "json",
//			success: function(data) {
//				if(!!data){
//					$(".ma img").attr("src",""+host+"/"+data.qrcode+"")
//				}
				var image = new Image()
			    html2canvas($(".create-img")).then(function(canvas) {
			//        document.getElementById("create_2").appendChild(canvas);
			        image.src = canvas.toDataURL("image/png")
			    });
				$("#create").append(image)
				var wid=$("#create").width()-2
				$("#create img").width(wid)
//			}
//		})
	</script>
</html>